// 组件封装案例：鼠标效果
import React, { Component } from 'react'
import './index.css'
class Mouse extends Component {
    state = {
        x: 0,
        y: 0
    }
    componentDidMount() {
        // 监听鼠标移动事件
        window.addEventListener('mousemove', this.hMove)
    }
    // 清理工作
    componentWillUnmount() {
        // 事件解绑
        window.removeEventListener('mousemove', this.hMove)
    }
    // 鼠标移动事件处理函数
    hMove = (e) => {
        // console.log(e.pageX, e.pageY)
        this.setState({
            x: e.pageX,
            y: e.pageY
        })
    }
    render() {
        return (
            <div>
                <h1 className="color">鼠标移动位置:{this.state.x}--{this.state.y}</h1>
            </div>
        )
    }
}

export default Mouse